<template>
  <view class="car-info">
    <view class="site-info-wrap">
      <view class="title-wrap">
        <template v-if="isEdit">
          <view class="edit-title">
            <input type="text" v-model="name" @blur="submitEditName" :focus="isFocus" :maxlength="12" />
            <view class="text-len">
              <text>{{ name.length }}</text>
              /12
            </view>
          </view>
          <text class="tip">洗车点</text>
        </template>
        <template v-else>
          <view class="title" @click="openEditTitle">
            <text>{{ carData.station_Name }}洗车点</text>
            <i-icon icon="iconqiyebianji"></i-icon>
          </view>
        </template>
      </view>
      <view class="list">
        <view class="item">
          <view class="item-l">
            <view class="name">
              <i-icon icon="icontime"></i-icon>
              营业时间：
            </view>
            <text class="val">{{ carData.open_Time }}</text>
          </view>
          <view class="item-r"><text class="set" @click="openSet(1)">设置</text></view>
        </view>
        <view class="item">
          <view class="item-l">
            <view class="name">
              <i-icon icon="icontingcheguanli"></i-icon>
              停车费：
            </view>
            <text class="val">{{ carData.park }}</text>
          </view>
          <view class="item-r"><text class="set" @click="openSet(2)">设置</text></view>
        </view>
        <view class="item">
          <view class="item-l">
            <view class="name">
              <i-icon icon="icondizhi1"></i-icon>
              地址：
            </view>
            <text class="val u-line-1">{{ carData.address }}</text>
          </view>
          <view class="item-r">
            <view class="distance" @click="goNavigation">
              <i-icon icon="icondaohang"></i-icon>
              {{ carData.distance }}km
            </view>
          </view>
        </view>
      </view>
      <text class="reset-location" @click="resetLocation">重新定位</text>
    </view>
    <carList v-for="item in carData.selfServiceCarWashMachineList" :carListData="item" :key="item.id"></carList>
  </view>
</template>

<script>
import carList from './carList'
export default {
  data() {
    return {
      // 洗车店名称
      name: '',
      // input是否聚焦
      isFocus: false,
      // 是否在修改洗车店名称
      isEdit: false
    }
  },
  props: {
    carData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  components: {
    carList
  },
  methods: {
    submitEditName() {
      this.isEdit = false
      if (this.name === '') {
        return
      }
      this.$emit('submitEditName', {
        name: this.name,
        id: this.carData.id
      })
    },
    filterTime(val) {
      if (val) return val.split('T')[1].slice(0, 5)
    },
    openSet(type) {
      let obj = {}
      if (type === 1) {
        obj = {
          type: 1,
          open_Start_Time: this.carData.open_Start_Time,
          open_End_Time: this.carData.open_End_Time
        }
      } else {
        obj = {
          type: 2,
          park: this.carData.park
        }
      }
      obj.id = this.carData.id
      this.$emit('openSet', obj)
    },
    // 重新定位
    resetLocation() {
      let _this = this
      uni.chooseLocation({
        latitude: this.carData.lat,
        longitude: this.carData.lon,
        geocode: true,
        success: function(resData) {
          uni.request({
            url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${resData.latitude},${resData.longitude}&key=LBOBZ-KSNKF-HIVJP-JXCC3-B3RRQ-ZUFKI`,
            success: async res => {
              let data = res.data.result
              console.log('data', data)
              let obj = {
                id: _this.carData.id,
                address: resData.address,
                lat: resData.latitude,
                lon: resData.longitude,
                // 所属区ID
                base_Region_Id: data.ad_info.adcode,
                // 所属城市ID
                base_Region_City_Id: data.ad_info.city_code.substring(3),
                // 所属省ID
                base_Region_Province_Id: data.ad_info.adcode.slice(0, 2) + '0000'
              }
              console.log('data', data)
              _this.$root.resetLocation(obj)
            }
          })
        }
      })
    },
    // 去导航
    goNavigation() {
      console.log('去导航', this.carData)
      uni.openLocation({
        latitude: this.carData.lat,
        longitude: this.carData.lon,
        name: this.carData.station_Name,
        address: this.carData.address
      })
    },
    // 打开修改标题框
    openEditTitle() {
      this.isEdit = true
      this.name = this.carData.station_Name
      this.isFocus = true
    }
  }
}
</script>

<style lang="scss" scoped>
.car-info {
  border-radius: 10rpx;
  padding: 20rpx;
  margin: 0 24rpx;
  margin-top: 40rpx;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  &:nth-child(2) {
    margin-top: 10rpx;
  }
  .site-info-wrap {
    padding-bottom: 30rpx;
    border-bottom: 2rpx solid #eeeeee;
    .title-wrap {
      margin-bottom: 10rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      .tip {
        margin-left: 20rpx;
        font-weight: bold;
        color: #333333;
        font-size: 16px;
      }
      .title {
        font-weight: bold;
        color: #333333;
        font-size: 32rpx;
        text {
          margin-right: 10rpx;
        }
      }
      .edit-title {
        height: 100%;
        position: relative;
        input {
          padding: 0 10rpx;
          width: 500rpx;
          border-radius: 15rpx;
          height: 100%;
          font-size: 32rpx;
          background-color: #f8f8f8;
        }
        .text-len {
          position: absolute;
          bottom: 4rpx;
          right: 10rpx;
          font-size: 12rpx;
          text {
            color: #f30000;
          }
        }
      }
    }
    .list {
      .item {
        padding: 8rpx 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item-l {
          flex: 1;
          display: flex;
          overflow: hidden;
          .name {
            color: #999999;
            display: flex;
            align-items: center;
            .i-icon {
              margin-right: 10rpx;
            }
          }
          .val {
            flex: 1;
            color: #333333;
          }
        }
        .item-r {
          .set {
            color: #38acff;
          }
          .distance {
            padding: 4rpx 15rpx;
            background-color: #ffe23e;
            border-radius: 20rpx;
            .i-icon {
              margin-right: 6rpx;
            }
          }
        }
      }
    }
    .reset-location {
      padding-left: 40rpx;
      color: #38acff;
    }
  }
}
</style>
